<template>
  <view class="my-wrapper">
    <view class="user">
      <view class="header-wrapper">
        <view
          v-if="logins"
          class="user-content flex"
          @tap="navTo('/pages/user/userinfo/userinfo')"
        >
          <view class="left-user flex">
            <image
              class="img"
              :src="userInfo.avatarUrl || headImg"
              mode="aspectFill"
            ></image>
            <view class="content">
              <view class="name">
                {{ userInfo.nickName == null ? "游客登录" : userInfo.nickName }}
              </view>
              <view class="phone"> {{ userInfo.phone }} </view>
            </view>
          </view>
          <view class="right-user">
            <image :src="btn_enter" mode="aspectFill"></image>
          </view>
        </view>
        <view
          v-if="!logins"
          class="user-content flex"
          @tap="navTo('/pages/public/login')"
        >
          <view class="left-user flex">
            <image
              class="img"
              src="/static/missing-face.png"
              mode="aspectFill"
            ></image>
            <view class="content">
              <view class="login-name">登录/注册</view>
            </view>
          </view>
        </view>
      </view>
      <view class="collect-attention flex-start">
        <view
          class="collect-wrapper"
          @tap="navTo('/pages/user/collection/collection')"
        >
          <view class="collect-num"> {{ userInfo.favorite_product }} </view>
          <view class="collect-text"> 收藏商品 </view>
        </view>
        <view class="collect-wrapper" @tap="navTo('/pages/user/coupon/list')">
          <view class="collect-num"> {{ userInfo.favorite_shop }} </view>
          <view class="collect-text"> 关注店铺 </view>
        </view>
      </view>
      <view class="my-list">
        <view
          class="my-list-item flex-start"
          @tap="navTo('/pages/user/account/account')"
        >
          <image :src="icon_tuiguang" mode="aspectFill"></image>
          <view class="list-item-text"> 我的推广 </view>
        </view>
        <view class="my-list-item flex-start" @tap="getBusinessInfo">
          <image :src="icon_ruzhu" mode="aspectFill"></image>
          <view class="list-item-text"> 商家入驻 </view>
        </view>
        <view
          class="my-list-item flex-start"
          @tap="navTo('/pages/set/feedback/detail')"
        >
          <image :src="icon_fankui" mode="aspectFill"></image>
          <view class="list-item-text"> 问题反馈 </view>
        </view>
        <view
          class="my-list-item flex-start"
          @tap="navTo('/pages/set/about/about')"
        >
          <image :src="icon_guanyuwomen" mode="aspectFill"></image>
          <view class="list-item-text"> 关于我们 </view>
        </view>
        <view class="my-list-item flex-start" @tap="handlePhone">
          <image :src="icon_kefu" mode="aspectFill"></image>
          <view class="list-item-text"> 联系客服 </view>
        </view>
        <view
          v-if="userInfo.type === 2"
          class="my-list-item flex-start"
          @tap="navTo('/pages/set/helper/index')"
        >
          <image :src="icon_shezhi" mode="aspectFill"></image>
          <view class="list-item-text"> 店铺设置 </view>
        </view>
        <view
          v-if="userInfo.type === 2"
          class="my-list-item flex-start"
          @tap="navTo('/pages/tradestatistics/index')"
        >
          <image :src="icon_jiaoyi" mode="aspectFill"></image>
          <view class="list-item-text">交易统计</view>
        </view>
        <view
          v-if="userInfo.type === 2"
          class="my-list-item flex-start"
          @tap="navTo('/pages/commodity/index')"
        >
          <image :src="icon_shangpinguanli" mode="aspectFill"></image>
          <view class="list-item-text"> 商品管理 </view>
        </view>
      </view>
    </view>
    <!-- <view class="popup spec show" v-if="specClass === 'shows'" @tap="hideSpec">
      <view class="mask" @tap="hideSpec"> </view>
      <view class="layers">
        <view class="box-wrapper"> 135-5253-1074 </view>
        <view class="btn-wrapper">
          <view class="btn border-right" @tap="cancle"> 取消 </view>
          <view class="btn right" @tap="conrfim"> 呼叫 </view>
        </view>
      </view>
    </view> -->
    <tab-bar :current="currentIndex" @change="tabchange"></tab-bar>
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import { mapMutations } from "vuex";
import tabBar from "@/components/tabbar/index.vue";
import { business_info } from "@/api/basic";
import { memberInfo } from "@/api/userInfo";
import { config } from "@/api/product";
export default {
  components: { tabBar },
  data() {
    return {
      logins: false,
      currentIndex: 3,
      loading: true,
      phone:"",
      userInfo: {
        nickName: null,
      },
      specClass: "none", // 规格弹窗
      headImg: this.$mAssetsPath.headImg,
      btn_enter: this.$mAssetsPath.btn_enter,
      icon_tuiguang: this.$mAssetsPath.icon_tuiguang,
      icon_ruzhu: this.$mAssetsPath.icon_ruzhu,
      icon_fankui: this.$mAssetsPath.icon_fankui,
      icon_guanyuwomen: this.$mAssetsPath.icon_guanyuwomen,
      icon_kefu: this.$mAssetsPath.icon_kefu,
      icon_shezhi: this.$mAssetsPath.icon_shezhi,
      icon_jiaoyi: this.$mAssetsPath.icon_jiaoyi,
      icon_shangpinguanli: this.$mAssetsPath.icon_shangpinguanli,
    };
  },
  computed: {},
  onLoad() {},
  onShow() {
    // 初始化数据
    this.initData();
  },
  methods: {
    ...mapMutations(["login"]),
    conrfim() {
      this.hideSpec();
    },
    async config() {
      await this.$http
        .get(`${config}`, { key: "about" })
        .then(async (res) => {
          this.loading = false;
          this.phone = res.data.phone;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    tabchange(item) {
      this.$mRouter.push({ route: item.pagePath });
    },
    getBusinessInfo() {
      this.hasLogin = this.$mStore.getters.hasLogin;
      if (this.hasLogin) {
        this.getBusiness();
      } else {
        this.$mRouter.push({ route: "/pages/public/login" });
      }
    },
    async getBusiness() {
      await this.$http
        .get(`${business_info}`)
        .then((res) => {
          let status = res.data.status;
          this.loading = false;
          if (status == 1) {
            this.$mRouter.push({ route: "/pages/user/address/success" });
          } else if (status == 2) {
            this.$mRouter.push({ route: "/pages/user/address/fail" });
          } else if (status == 0) {
            this.$mRouter.push({ route: "/pages/user/address/wait" });
          } else {
            this.$mRouter.push({ route: "/pages/user/address/manage" });
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //拨打电话
    handlePhone() {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: this.phone,
        // 成功回调
        success: (res) => {
          console.log("调用成功!");
        },
        // 失败回调
        fail: (res) => {
          console.log("调用失败!");
        },
      });
    },
    //取消按钮的操作
    cancle() {
      this.hideSpec();
    },
    hideSpec() {
      this.specClass = "hide";
      setTimeout(() => {
        this.specClass = "none";
      }, 250);
    },
    // 数据初始化
    async initData() {
      this.hasLogin = this.$mStore.getters.hasLogin;
      if (this.hasLogin) {
        await this.getMemberInfo();
        this.config();
      } else {
        this.loading = false;
      }
    },
    // 获取用户信息
    async getMemberInfo() {
      await this.$http
        .get(memberInfo)
        .then((r) => {
          this.loading = false;
          this.userInfo = r.data;
          this.logins = true;
          console.log(r);
          uni.setStorageSync("userInfo", this.userInfo);
        })
        .catch(() => {
          this.hasLogin = false;
          this.userInfo = {};
          this.loading = false;
        });
    },
    // 通用跳转
    navTo(route) {
      if (!route) return;
      if (!this.hasLogin) {
        this.$mRouter.push({ route: "/pages/public/login" });
      } else {
        this.$mRouter.push({ route });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #ffffff;
}
.my-wrapper {
  height: 100vh;
  background: #ffffff;
  .user {
    position: relative;
    background: #ffffff;
    .header-wrapper {
      background: #f91c1c;
      height: 306upx;
      .user-content {
        padding: 0 30upx;
        .left-user {
          color: #ffffff;
          image {
            height: 120upx;
            width: 120upx;
            border-radius: 50%;
            margin-right: 30upx;
          }
          .name {
            font-size: 32upx;
            height: 33upx;
            line-height: 33upx;
            font-weight: bold;
            margin-bottom: 20upx;
          }
          .phone {
            height: 33upx;
            font-size: 26upx;

            line-height: 33upx;
          }
        }
        .right-user {
          image {
            height: 28upx;
            width: 16upx;
          }
        }
      }
    }
    .login-name {
      font-size: 38upx;
    }
    .collect-attention {
      position: absolute;
      width: 690upx;
      top: 220upx;
      margin-left: 30upx;
      height: 151upx;
      background: #ffffff;
      box-shadow: 0px 8upx 12upx rgba(0, 0, 0, 0.14);
      border-radius: 10upx;
      .collect-wrapper {
        width: 50%;
        text-align: center;
        border-right: 1upx solid #f9f9f9;
        .collect-num {
          font-weight: bold;
          font-size: 36upx;
          color: #f91c1c;
        }
        .collect-text {
          font-size: 24upx;
        }
      }
    }
    .my-list {
      padding-top: 80upx;
      background: #ffffff;
      margin: 0 30upx;
      .my-list-item {
        height: 97upx;
        line-height: 97upx;
        border-bottom: 1upx solid #eeeeee;
        image {
          width: 36upx;
          height: 34upx;
        }
        .list-item-text {
          font-size: 28upx;
          font-weight: 400;
          color: #333333;
          margin-left: 30upx;
        }
      }
    }
  }
  .popup .layers {
    position: fixed;
    z-index: 101;
    left: 60upx;
    top: 30%;
    width: 631upx;
    height: 346upx;
    border-radius: 10upx;
    background-color: #fff;
    .box-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32upx;
      font-weight: bold;
      height: 246upx;
    }
    .btn-wrapper {
      display: flex;
      justify-content: flex-start;
      border-top: 1upx solid #eeeeee;
      .btn {
        width: 50%;
        line-height: 100upx;
        text-align: center;
        font-size: 28upx;
        font-weight: 500;
      }
      .right {
        width: 50%;
        line-height: 100upx;
        text-align: center;
        color: #326130;
        font-size: 28upx;
        font-weight: 500;
      }
      .border-right {
        border-right: 1upx solid #eeeeee;
      }
    }
  }
  .shows {
    display: block;
  }
}
.nav-bar-tab {
  background: #f91c1c;
  .center {
    color: #ffffff;
    font-size: 34upx;
    font-weight: bold;
  }
}
</style>
